<template>
  <view class="like-star-view">
    <scroll-view scroll-y="true" style="width: 100vw;height: 100vh;" lower-threshold="50" @scrolltolower="getMoreLikeStar">
      <!-- 点赞评论 -->
      <view class="like-star-item" v-for="item in data.likeStarList" @click="showNote(item.noteId)">
        <image class="avater" lazy-load="true" :src="item.userAvatar" @click.stop="showOtherInfo(item.userId)"></image>
        <view class="like-star-content">
          <text class="user-name">{{item.userName}}</text>
          <view>
            <text class="act-text">{{item.tag}}</text>
            <text class="time">{{item.time}}</text>
          </view>
          <view class="cmt-box" v-if="item.cmt != null">
            <view class="cmt-index"></view>
            <text class="cmt-text">{{data.curUser.userName}}:{{item.cmt}}</text>
          </view>
        </view>
        <image class="note-cover" lazy-load="true" :src="item.url"></image>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { reactive, ref,toRefs,onMounted } from 'vue';
import { onShow,onLoad,onUnload,onHide } from '@dcloudio/uni-app'
import helper from '../../common/helper.js'
 
const data = reactive({
  curUser: uni.getStorageSync("curUser") || null,
  likeStarList:[],
  total: 0,
  pageNum: 0,
  pageSize: 10,
});

onLoad(()=>{
  getLikeStar()
})

function getLikeStar(){
  uni.request({
    url: helper.webUrl + "/note/getMyLikeStarMsg",
    method:'GET',
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'token': helper.getToken()
    },
    data: {
      pageNum: data.pageNum,
      pageSize: data.pageSize
    },
    success: (res) => {
      console.log(res.data);
      if(res.data.code == 200){
        data.total = res.data.data.total
        let list = res.data.data.record
        for(let i = 0; i < list.length; i++){
          list[i].time = helper.getDate(list[i].time)
          data.likeStarList.push(list[i])
        }
        data.pageNum++
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function getMoreLikeStar(){
  console.log("获取更多的关注信息")
  if(data.total > data.likeStarList.length){
    getLikeStar()
  }
}

function showNote(noteId){
  console.log("查看笔记"+noteId)
  let index = ""
  uni.navigateTo({
    url:`/subpages/noteDetail/noteDetail?noteId=${noteId}&index=${index}`
  })
}
function showOtherInfo(userId){
  console.log("查看用户")
  uni.navigateTo({
    url:"/subpages/otherInfo/otherInfo?userId="+userId
  })
}
</script>

<style>
.like-star-view{
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
}
.like-star-item{
  display: flex;
  width: 100vw;
  min-height: 15vh;
  align-items: center;
  background-color: #fff;
  padding-block: 5px;
}
.avater{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 20px;
}
.like-star-content{
  display: flex;
  flex-direction: column;
  width: 60%;
  margin-left: 10px;
}
.user-name{
  font-size: 16px;
}
.act-text{
  font-size: 14px;
  color: #949494;
}
.time{
  margin-left: 10px;
}
.note-cover{
  width: 60px;
  height: 60px;
  border-radius: 20%;
  margin-left: auto;
  margin-right: 20px;
}
.cmt-box{
  width: 100%;
  height: 40px;
  display: flex;
  margin-top: 5px;
  /* 隐藏溢出容器的文本 */
  overflow: hidden;
  /* 在文本溢出时显示省略号 */
  text-overflow: ellipsis;
}
.cmt-index{
  min-width:5px;
  height: 20px;
  background-color: #949494;
}
.cmt-text{
  margin-left: 10px;
  font-size: 13px;
  color: #949494;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
</style>
